<template>
  <div class="com-footer">
    <div class="w-1200 footer-inner">
      <div class="info">
        <div class="left" style="padding: 0 5px">
          <div class="top-height tel">
            全国400服务热线： <strong>400-888-8888</strong>
          </div>
          <div class="quick-link">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">银行卡查银行分行联行号</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">银行卡查银行分行联行号</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
              </el-col>
              <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">银行卡查银行分行联行号</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">银行卡查银行分行联行号</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
              </el-col>
              <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="hidden-xs-only">
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">银行卡查银行分行联行号</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">银行卡查银行分行联行号银行卡查银行分行联行号银行卡查银行分行联行号</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
                <div class="quick-link-item">身份证真伪在线核验</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="center">
          <div class="top-height">联系我们</div>
          <div class="quick-link">
            <div class="quick-link-item">联系我们</div>
            <div class="quick-link-item">关于我们</div>
            <div class="quick-link-item">帮助中心</div>
            <div class="quick-link-item">隐私政策</div>
            <div class="quick-link-item">用户服务协议用户服务协议用户服务协议</div>
          </div>
        </div>
        <div class="right">
          <div class="top-height">
            关注微信公众号
          </div>
          <div class="quick-link">
            <div class="img-box qr-image"></div>
            <p class="qr-tips">微信扫一扫，关注公众号</p>
          </div>
        </div>
      </div>
      <div class="copyright">COPYRIGHT 山东诚浩汽车贸易有限公司 备案号 <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023120660号-1</a></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComFooter',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.com-footer {
  background: url("../../assets/images/footer_bg.jpg") no-repeat center;
  background-size: 100% 100%;
  color: #d7d7d7;
  padding-top: 20px;
  .info {
    display: flex;
    flex-wrap: wrap;
    .top-height {
      color: #fff;
      height: 70px;
      padding: 20px 0 20px;
      font-weight: bold;
      font-size: 16px;
      &.tel {
        font-size: 20px;
        strong {
          color: #f33;
        }
      }
    }
    .quick-link {
      .quick-link-item {
        margin-bottom: 20px;
        font-size: 15px;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &:hover {
          text-decoration: underline;
          color: #fff;
        }
      }
      .qr-image {
        width: 120px;
        height: 120px;
        background-color: #fff;
      }
      .qr-tips {
        color: #fff;
        font-size: 12px;
        margin-top: 8px;
      }
    }
    .left {
      width: 750px;
    }
    .center {
      margin-left: 20px;
      width: 180px;
    }
    .right {
      margin-left: 20px;
      width: 230px;
    }
  }
  .copyright {
    font-size: 12px;
    text-align: center;
    padding: 10px 0 10px;
    line-height: 1.8;
  }
  @media (max-width: 767px) {
    .info {
      .top-height {
        font-size: 14px;
        &.tel {
          font-size: 18px;
          strong {
            color: #f33;
          }
        }
      }
      .quick-link {
        .quick-link-item {
          font-size: 13px;
        }
      }
      .left {
        width: 100%;
      }
      .center {
        margin-left: 2%;
        width: 48%;
      }
      .right {
        width: 48%;
        margin-left: 2%;
      }
    }
  }
}
</style>
